<template>
    <div class="wrapper">
        <div class="mainback">
            <div class="kspic">
                <img id="kspic" src="@/assets/static/imgkao/blue.jpg" width="104" height="132"
                     onerror='@/assets/static/imgkao/blue.jpg'/>
            </div>
            <div class="ksinfo">
                <p class="info">
                    <span class="label">姓名</span>：
                    <span class="content">{{ nickname }}</span>
                </p>
                <p class="info">
                    <span class="label">座位号</span>：
                    <span class="content">001</span>
                </p>
                <p class="info">
                    <span class="label">准考证号</span>：
                    <span class="content">{{ idCard }}</span>
                </p>
                <p class="info">
                    <span class="label">有效身份证件号</span>：
                    <span class="content">{{ idNumber }}</span>
                </p>
            </div>
            <div class="kstime">
                <div id="msgTip">
                    <span class="label">距离考试还有：</span>
                    <span id="clock">{{ countDownTime }}</span>
                    <span class="joinExam">
                        <a @click="joinExam" style="text-decoration:none;color:#FFFF00;">进入考试</a>
                    </span>
                </div>
            </div>
            <div style="float:right;margin-top:120px;font-weight:bold;margin-right:50px;font-size:18px;color:black;">
                注：正式考试时，考生无法自行开始考试
            </div>
            <div class="ksname2" style="font-size:30px">全国执业兽医资格考试</div>
            <!--            <iframe class="centerText" frameborder="0" id="mainText" src=""></iframe>-->
            <router-view class="centerText"/>
            <div id="kckc">
                <div @click="instructions" class="kw kc" id="kwyq">考生须知</div>
                <div @click="help" class="cz kc" id="czsm">操作说明</div>
            </div>
        </div>
        <div id="ksinfodialog" style="display:none">
            <div class="ks_info">
                <div style="height:10px;"></div>
                <div class="title_txt">考生详细信息：</div>
                <div class="td-photo">
                    <img src="#" style="margin-top:76px;margin-left:40px;" class="photo kspic" width="104"
                         height="132"/>
                </div>
                <table align="center" style="margin:0 auto;margin-left:160px;">
                    <tbody>
                    <tr>
                        <th>姓<span class="zhidden">考考考考考</span>名:</th>
                        <td style="width:80px"><span id="xm"></span>
                        </td>
                    </tr>
                    <tr>
                        <th>座<span class="zhidden">考考</span>位<span class="zhidden">考考</span>号:</th>
                        <td><span id="xb"></span></td>
                    </tr>
                    <tr>
                        <th>准<span class="zhidden">考</span>考<span class="zhidden">考</span>证<span
                                class="zhidden">考</span>号:
                        </th>
                        <td><span id="zkzh2"></span></td>
                    </tr>
                    <tr>
                        <th>有效身份证件号:</th>
                        <td><span id="zjbm"></span></td>
                    </tr>
                    <tr>
                        <th>&nbsp;</th>
                        <td>
                            <div i="button" class="dialog_button"></div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {examMixin} from "../mixins/mixin";
    import {countDownFormat} from "../utils/common";
    import {getQuestions} from "../api/exam";
    import {sha1} from "../utils/sha1";
    import exam from "./exam";

    export default {
        mixins: [examMixin],
        data() {
            return {
                //  当前考试
                exam: [],
                //  倒计时计时器标记
                timer: null,
                //  倒计时时间
                countDownTime: '00:00:00',
                //  考试人员姓名
                nickname: 'xxx',
                //  准考证号码
                idCard: 'xxx',
                //  身份证号码
                idNumber: 'xxx'
            }
        },
        created() {
            //  验证考试的参数
            this.checkExamParams();

            //  获取登录用户
            let loginUser = this.getStore("loginUser");
            this.nickname = loginUser.nickname;

            let joinTime = this.getStore("joinTime");
            if (!joinTime) {
                joinTime = new Date();
                this.setStore("joinTime", joinTime);
            }
            if(typeof joinTime  === "string")joinTime = new Date(joinTime);

            //  考试倒计时计算
            let examEndTime = new Date();
            examEndTime.setTime(joinTime.getTime() + (this.exam.test_time * 1000));
            console.log(examEndTime);
            this.timer = setInterval(() => {
                let diffTime = examEndTime.getTime() - Date.now();
                diffTime = parseInt(diffTime / 1000);
                this.countDownTime = countDownFormat(diffTime);
                if (diffTime <= 0) clearInterval(this.timer);
            }, 1000);
        },
        methods: {
            instructions() {
                this.$router.push("/agreement/instructions");
            },
            help() {
                this.$router.push("/agreement/help");
            },
            async joinExam() {

                //  进入考试页面
                this.$router.push("/exam");
                return false;
            }
        }
    };
</script>
<style src="@/assets/static/imgkao/before.css" scoped/>
<style src="@/assets/static/imgkao/style.css" scoped/>
<style lang="stylus" rel="stylesheet/stylus">
    body
        border: 1px solid transparent
        background: url(@/assets/static/imgkao/background.jpg) repeat-x;

    .centerText
        padding: 8px;
        box-sizing border-box;

    .joinExam
        cursor: pointer

    .wrapper
        font-family: "宋体"
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;

        overflow-x: hidden;
        margin: 0;
        padding: 0;

        .ksinfo
            .info
                padding: 0;
                margin: 0;
                display: flex
                font-size: 18px;

                .label
                    height: 30px;
                    flex: 130px 0 0
                    width: 130px;
                    text-align: justify
                    display: inline-block
                    overflow hidden

                    &:after {
                        height: 0;
                        line-height: 0;
                        padding-left 100%;
                        display: inline-block;
                        content: " ";
                    }

                .content
                    flex: 1
                    display: inline-block
                    text-align left

    #photo
        background: url(@/assets/static/imgkao/blue.jpg)

    #msgTip
        padding: 0;
        display: flex

        .label
            width: 120px;
            display: inline-block
            margin: 0
            padding: 0

        .joinExam
            flex: 1
            text-align center

    #clock
        width: 72px;
        flex: 0 72px;
    #kckc
      width: 450px;
      position: absolute!important;
      left: 50%!important;
      margin-left: -225px;
    #czsm
      float: right!important;
</style>
